<script lang="ts" setup>
  import { requestBindCode } from '@/api/business/tracecode/detectionInfo'
  import BottomButton from '@/components/BottomButton/BottomButton.vue'
  import { HttpCodeEnum } from '@/enum/httpEnum'
  import { useUserInfoStore } from '@/stores/userInfo'
  import { PAGE_TITLE } from '@/enum/pageEnum'
  const userInfoStore = useUserInfoStore()
  import Layout from './components/Layout.vue'
  const props = defineProps<{ codeValue: string }>()
  const start = async () => {
    const { responseCode, responseData } = await requestBindCode({ codeValue: props.codeValue, detectionType: userInfoStore.detectionType })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      uni.redirectTo({
        url: `/pages/detection/questionnaire?publishId=${responseData.publishId}&detectionInfoId=${responseData.detectionInfoId}`,
      })
    }
  }
</script>

<template>
  <Layout :title="PAGE_TITLE" :isScroll="true">
    <template #content>
      <view class="detection-text"> <text class="text">检测须知</text></view>
      <view class="light-text">欢迎您使用菌群检测服务</view>
      <view class="status-text">菌群检测共分四步：</view>
      <view class="status">
        1、采样物品清点； <br />2、填写问卷；<br />
        3、取样；<br />4、寄送。
      </view>
      <view class="division-line" />
      <view class="status-text"> 请您先检查检测管包装是否完好无破损，按检测盒类别检查采样工具是否齐全 </view>
      <view class="status">
        <view>1、肠道菌群检测盒包含物品：</view>
        <view>· 无菌采样纸</view>
        <view>· 一次性手套</view>
        <view>· 带有条形码和保护液的取样管</view>
      </view>
      <view class="status">
        <view>2、生殖道微生态检测盒包含物品：</view>
        <view>· 一次性取样拭子</view>
        <view>· 带有条形码和保护液的取样管</view>
      </view>
      <view class="status">
        <view>3、口腔基因检测盒包含物品：</view>
        <view>· 一次性取样拭子</view>
        <view>· 带有条形码和保护液的取样管</view>
      </view>
      <view class="status-text check-tip">检查无误请点击下列开始按钮</view>
    </template>
    <template #button>
      <BottomButton buttonText="开始" @on-click="start()" :is-pre="false" />
    </template>
  </Layout>
</template>

<style lang="less">
  .detection-text {
    font-size: 44rpx;
    font-weight: 600;
    color: #002329;
    text-align: center;

    .text {
      position: relative;

      &::after {
        position: absolute;
        bottom: -4rpx;
        left: 0;
        width: 100%;
        height: 12rpx;
        content: ' ';
        background: #faad14;
      }
    }
  }

  .light-text {
    margin: 48rpx 0 0;
    color: #08979c;
  }

  .status-text {
    margin: 32rpx 0 0;
    color: #1d2129;
  }

  .status {
    margin: 32rpx 0 40rpx;
    line-height: 24px;
    color: #4e5969;
  }

  .division-line {
    height: 2rpx;
    border-top: 2rpx dotted #b5f5ec;
  }

  .inspect-text {
    margin: 38rpx 0 32rpx;
  }

  .check-tip {
    margin-top: 34rpx;
    text-align: center;
  }
</style>
